<template>
    <div class="">

        <el-row>
  <el-col :span="11"><div class="grid-content bg-purple-light">
    <el-input 
              placeholder="请输入订单号"
              v-model="planId"
              clearable>
            </el-input>
            </div></el-col>
  <el-col :span="1"><div class="grid-content bg-purple-light" style="float:left">
    <el-button @click="find()" type="success" icon="el-icon-search"></el-button>
  </div></el-col>
</el-row>

        <el-table   
            border
            style="width: 100%"
            :data="plan.records"
            ref="userTable"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>

            <el-table-column v-for="column in columns" :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width">
            </el-table-column>

            <!--操作列-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="DetailPages(scope.row)" type="success">查看详情</el-button>

                     <el-button
                    size="mini" v-if="scope.row.planstate=='申请中'"
                    @click="auditPlan(scope.row)" type="primary">点击审核</el-button> 
                    
                
                 
              
                </template>
            </el-table-column>

        </el-table>

        <!--分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="plan.current"
            :page-sizes="[2,3,4,5]"
            :page-size="plan.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="plan.total">
        </el-pagination>


        <!--详情信息-->
        <el-dialog title="采购计划详情信息" :visible.sync="DetailTag" 
        :close-on-click-modal="false" top="10px">
            <el-form label-width="100px">

              <el-row>
  <el-col :span="12" v-for="pl in plan.records" :key="pl.planid" ><div style="font-size:20px;" class="grid-content bg-purple-light" v-if="reappid.planid==pl.planid">
            申请人:{{reappid.user.realname}}

            </div></el-col>
  <el-col :span="12"><div style="font-size:20px;" class="grid-content bg-purple-light">
            申请时间:{{reappid.plandate}}
            </div></el-col>
 
</el-row>
                    
                      <el-table   
            border
            style="width: 100%"
            :data="plan2"
            ref="userTable"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>

            <el-table-column v-for="column in columns2" :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width">
            </el-table-column> 

             <!--自定模板-->
             <el-table-column label="总计">
                <template slot-scope="scope">
                     {{scope.row.price*scope.row.count}}
                </template>
             </el-table-column>
                      </el-table> 

                      <el-row>
  <el-col :span="12" ><div style="font-size:20px;" class="grid-content bg-purple-light">
            审核人:{{reappid.approver}}

            </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light" style="font-size:20px;">
            总数量:{{reappid.sumcount}}
            </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light" style="font-size:20px;">
            总金额:{{reappid.sumprice}}
            </div></el-col>
 
</el-row>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DetailTag = false">返 回</el-button>
            </div>
            </el-dialog>

    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            columns:[
              {prop:'planid',label:'采购计划编号',width:'300'},
              {prop:'user.realname',label:'申请人',width:'100'},
              {prop:'supplier.suppliername',label:'供应商',width:'100'},
              {prop:'plandate',label:'制定计划时间',width:'300'},
              {prop:'sumcount',label:'总数量',width:'100'},
              {prop:'sumprice',label:'总金额',width:'100'},
              {prop:'approver',label:'审批人',width:'100'},
              {prop:'planstate',label:'状态',width:'100'},
          ],
          columns2:[
              {prop:'material.materialname',label:'产品名称',width:'100'},
              {prop:'material.unit',label:'单位',width:'100'},
              {prop:'count',label:'数量',width:'100'},
              {prop:'price',label:'单价',width:'100'},
          ],
            plan:[],
            plan2:[],
            planId:"",
            Materials:[],
            applyDate:"",
          DetailTag:false,
          Supplier:[],
          reappid:[],
        }
    },
    components: {},
    methods: {
        find(page=1,size=3){
          let url="/plan/selectPlan";
          let params=new URLSearchParams();
          params.append('page',page);
          params.append('size',size);
          params.append('planId',this.planId);
          this.$axios.post(url,params).then(resp=>{
                console.log(resp.data);
               this.plan=resp.data;
          });
      },
      
       handleSizeChange(size){
             this.find(this.plan.current,size);
      },
      handleCurrentChange(page){
         this.find(page,this.plan.size);
      },
      auditPlan(row){
        console.log(row);
        let url="/plan/updateState";
        let params=new URLSearchParams();
        params.append('planid',row.planid);
        this.$axios.post(url,params).then(resp=>{
            
            this.find();
        });
      },
      DetailPages(row){ 
        console.log(row);
        this.reappid=row;
        let url="/plan/selectPlanDetails";
        let params=new URLSearchParams();
        params.append('planid',row.planid);
        this.$axios.post(url,params).then(resp=>{
            console.log(resp.data);
            this.plan2=resp.data;
            this.DetailTag=true;

        });

      },
      
    },
    mounted() {
        this.find();
    },
}
</script>

<style  scoped>
</style>
